<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 阻止默认事件的发生（右击菜单不再出现） -->
        <button @contextmenu.prevent="">右键</button>
        <!-- 打印结果：右击不出现菜单 -->

        <!-- 阻止传播事件发生 -->
        <!-- 
            传播事件，由里向外传播 当点击fn2时，会先打印一遍fn2再打印fn1
            当加上stop修饰符之后，传播事件停止 点击fn2时 只会打印fn2
         -->
        <div @click="fn1">
            fn1
            <div @click.stop="fn2">fn2</div>
            <!-- 打印结果 点击fn2时只打印fn2 -->
        </div>

        <!-- self修饰符，确定在触发监听事件的时候 e.target 是否是自身 -->
        <div @click.self="fn1">
            fn3
            <div @click="fn2">fn4</div>
            <!-- 打印结果：点击fn2时 只打印fn2 -->
        </div>

        <!-- 把事件从传播变成捕获(由从里向外变成从外向里)  capture修饰符-->
        <div @click.capture="fn1">
            fn5
            <div @click="fn2">fn6</div>
            <!-- 打印结果：点击fn2时，先打印fn1在打印fn2 -->
        </div>

        <!-- once修饰符 只触发一次 -->
        <div @click.once="fn1">fn7</div>
        <!-- 只打印一次fn1 -->

        <!-- keyup修饰符 键盘抬起时触发 -->
        <input @keyup.13="fn2"></input>
        <!-- 只在按回车的时候打fn2 -->
        <input @keyup="fn2"></input> //按下任意键都会打印fn2
        <input @keydow.esc="fn2"></input>
        <input @keyup.enter="fn2"></input> //按enter打印fn2
        <input @keyup.space="fn2"></input> //按空格打印fn2
    </div>
</body>
<script>
    const vm = new Vue({
        el:'#app',
        data:{

        },
        methods:{
            fn1(){
                console.log('fn111111');
            },
            fn2(){
                console.log('fn222222');
            }
        }
    })
</script>
</html>